<template>
  <view class="ShareCanvas">
    <view class="canvas">
      <canvas canvas-id="shareCanvas" />
    </view>
  </view>
</template>
 
<script>
export default {
  name: 'ShareCanvas',
  methods: {
    // 商品分享
    setGoodsShareCanvas(info) {
      console.log('商品分享--info', info);
      return new Promise(async (resolve, reject) => {
        try {
          const ctx = uni.createCanvasContext('shareCanvas', this)
          // 绘制背景图
          ctx.setFillStyle('#FFFFFF')
          ctx.fillRect(0, 0, 211, 170)
 
          try {
            const { path } = await this.getImge(info.swiperList[0])
            ctx.drawImage(path, 0, 0, 211, 170)
          } catch (error) {
            console.error(error);
          }
          ctx.restore();
 
          // 绿色背景
          ctx.setFillStyle('#ff8e35')
          ctx.fillRect(0, 130, 131, 40) // x, y, width, height
 
          ctx.setFontSize(16);
          ctx.setTextAlign('center')
          ctx.setFillStyle('#FFFFFF')
          ctx.fillText(`折扣${info.memberPrice}`, 65, 130 + 18)
 
          ctx.setFontSize(12);
          ctx.setTextAlign('center')
          ctx.setFillStyle('#FFFFFF')
          ctx.fillText(`¥${info.price}`, 65, 130 + 34)
 
          // 划线
          ctx.beginPath()
          ctx.setLineWidth(1);
          ctx.setStrokeStyle('#FFFFFF')
          ctx.moveTo(40, 130 + 30)
          ctx.lineTo(90, 130 + 30)
          ctx.stroke()
 
          // 深绿色背景
          ctx.setFillStyle('#ff0000')
          ctx.fillRect(131, 130, 211 - 131, 40)
 
          // 立即抢购按钮
          ctx.setFontSize(16);
          ctx.setTextAlign('center')
          ctx.setFillStyle('#FFFFFF')
          ctx.fillText(`立即抢购`, 131 + (211 - 131) / 2, 130 + 26)
 
          ctx.draw(false, (() => {
            uni.canvasToTempFilePath({
              canvasId: 'shareCanvas',
              success: (res) => {
                return resolve(res.tempFilePath)
              },
              fail: function (error) {
                console.log('fail----fail', error);
                //TODO
                return reject(error)
              }
            }, this)
          }))
        } catch (error) {
          uni.hideLoading()
          console.log('画图失败error', error);
          return reject(error)
        }
      })
    },
    /**
     * 设置圆角矩形
     *
     * @param ctx 绘图上下文
     * @param cornerRadius 圆角半径
     * @param width 矩形宽度
     * @param height 矩形高度
     * @param x 矩形左上角的 x 坐标
     * @param y 矩形左上角的 y 坐标
     * @returns 无返回值
     */
    setRadius(ctx, cornerRadius, x, y, width, height) {
      // 开始绘制路径
      ctx.beginPath();
      // 绘制最左侧的圆角
      ctx.arc(x + cornerRadius, y + cornerRadius, cornerRadius, Math.PI, Math.PI * 1.5);
      // 绘制顶部边缘
      ctx.moveTo(x + cornerRadius, y);
      ctx.lineTo(x + width - cornerRadius, y);
      ctx.lineTo(x + width, y + cornerRadius);
      // 绘制最右侧的圆角
      ctx.arc(x + width - cornerRadius, y + cornerRadius, cornerRadius, Math.PI * 1.5, Math.PI * 2);
      // 绘制右侧边缘
      ctx.lineTo(x + width, y + height - cornerRadius);
      ctx.lineTo(x + width - cornerRadius, y + height);
      // 绘制最下侧的圆角
      ctx.arc(x + width - cornerRadius, y + height - cornerRadius, cornerRadius, 0, Math.PI * 0.5);
      // 绘制底部边缘
      ctx.lineTo(x + cornerRadius, y + height);
      ctx.lineTo(x, y + height - cornerRadius);
      // 绘制最左侧的圆角
      ctx.arc(x + cornerRadius, y + height - cornerRadius, cornerRadius, Math.PI * 0.5, Math.PI);
      // 绘制左侧边缘
      ctx.lineTo(x, y + cornerRadius);
      ctx.lineTo(x + cornerRadius, y);
      // 闭合路径
      ctx.closePath();
    },
    // 获取图片地址
    getImge(path) {
      // 利用promise异步转同步，否则可能显示不了～
      return new Promise((resolve, reject) => {
        uni.getImageInfo({
          src: path,
          success: function (res) {
            if (res && res.path) {
              resolve(res)
            } else {
              reject(false)
            }
          },
          fail: function (res) {
            reject(res)
          }
        })
      })
    },
    getSales(sales) {
      return sales >= 10000 ? sales / 10000 + 'w+' : sales
    },
  }
}
</script>
 
<style lang="scss" scoped>
// 隐藏画布
.ShareCanvas {
  position: absolute;
  top: -200px;
  z-index: -1;
  opacity: 0;
  .canvas canvas {
    width: 211px;
    height: 170px; // +16
  }
}
</style>